<template>
  <div class="learning-statistics">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-card class="stats-card" v-if="!loading">
      <template #header>
        <div class="card-header">
          <span>学习概览</span>
        </div>
      </template>

      <div class="stats-grid">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="stat-item stat-item-1">
              <div class="stat-value">{{ statistics.courses_completed || 0 }}/{{ statistics.courses_enrolled || 0 }}
              </div>
              <div class="stat-label">已学课程</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stat-item stat-item-2">
              <div class="stat-value">{{ statistics.lessons_completed || 0 }}</div>
              <div class="stat-label">已完成课时</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="stat-item stat-item-3">
              <div class="stat-value">{{ statistics.words_learned || 0 }}</div>
              <div class="stat-label">掌握单词</div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <div class="stat-item stat-item-4">
              <div class="stat-value">{{ statistics.sentences_mastered || 0 }}</div>
              <div class="stat-label">掌握句子</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="stat-item stat-item-5">
              <div class="stat-value">{{ formatStudyTime(statistics.total_study_time || 0) }}</div>
              <div class="stat-label">学习时长</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="recent-activity" v-if="!loading">
      <template #header>
        <div class="card-header">
          <span>最近学习</span>
        </div>
      </template>

      <div v-if="recentActivity.length === 0" class="no-activity">
        <el-empty description="暂无学习记录" image-size="60"/>
      </div>

      <div v-else class="activity-list">
        <div v-for="activity in recentActivity" :key="activity.id" class="activity-item">
          <div class="activity-content">
            <div class="activity-title"><el-link :href="'/course/' + activity.course_id">{{ activity.title }}</el-link>
            </div>
            <div class="activity-time">{{ formatDate(activity.updated_at) }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from '@/utils/http'
import { ElPageHeader, ElCard, ElRow, ElCol, ElEmpty, ElLink } from 'element-plus'

export default {
  name: 'LearningStatistics',
  components: {
    ElPageHeader,
    ElCard,
    ElRow,
    ElCol,
    ElEmpty,
    ElLink
  },
  data() {
    return {
      loading:true,
      statistics: {},
      recentActivity: []
    }
  },
  async mounted() {
    await this.loadStatistics()
    await this.loadRecentActivity()
    this.loading = false
  },
  methods: {
    async loadStatistics() {
      try {
        const response = await http.get('/progress/statistics')
        this.statistics = response
      } catch (err) {
        console.error('Failed to load statistics:', err)
        this.$message.error('加载统计信息失败')
      }
    },

    async loadRecentActivity() {
      try {
        // 获取最近的课程进度作为活动记录
        const response = await http.get('/progress/courses')
        this.recentActivity = response.slice(0, 5) // 取前5条记录
      } catch (err) {
        console.warn('Failed to load recent activity:', err)
      }
    },

    formatStudyTime(seconds) {
      if (!seconds) return '0秒'

      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = Math.floor(seconds % 60)

      let result = ''
      if (hours > 0) result += `${hours}小时`
      if (minutes > 0) result += `${minutes}分钟`
      if (secs > 0 || result === '') result += `${secs}秒`

      return result
    },

    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN')
    }
  }
}
</script>

<style scoped>
.learning-statistics {
  margin: 0 auto;
}

.header-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.stats-card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.card-header {
  font-weight: bold;
  font-size: 1.3rem;
  color: #333;
}

.stats-grid {
  padding: 0px 0;
}

.stat-item {
  text-align: center;
  padding: 10px 10px;
  border-radius: 10px;
  background-color: #fff;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-repeat: no-repeat;
  background-position: 20% bottom;
  background-size: auto 60%;
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.stat-item-1 {
  background-image: url('/assets/images/silhouette-danse-02.svg');
  background-color: #ffe0fc;
}

.stat-item-2 {
  background-image: url('/assets/images/silhouette-danse-04.svg');
  background-color: #e3f2fd;
}

.stat-item-3 {
  background-image: url('/assets/images/silhouette-danse-05.svg');
  background-color: #f3e5f5;
}

.stat-item-4 {
  background-image: url('/assets/images/silhouette-danse-06.svg');
  background-color: #e8eff5;
}

.stat-item-5 {
  background-image: url('/assets/images/silhouette-danse-14.svg');
  background-color: #d5f2e1;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1rem;
  color: #606266;
  font-weight: 500;
  cursor: pointer;
}

.recent-activity {
  margin-top: 0px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.activity-item {
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-title {
  font-weight: 500;
  color: #333;
}

.activity-time {
  color: #909399;
  font-size: 0.9rem;
}

.no-activity {
  text-align: center;
  padding: 10px 20px;
}

@media (max-width: 768px) {
  .stat-item {
    padding: 0;
  }

  .stat-value {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.8rem;
    font-weight: bold;
  }
}
</style>